<template>
  <div class="shopinfo-container">
    <!-- 头部 -->
    <Top></Top>
    <div>
      <!-- <b class="line"></b> -->
      <div class="nav-table" style="border-bottom:2px solid #d2364c ;">
        <div>
          <div class="long-title"><span class="all-goods">全部分类</span></div>
          <div class="nav-cont" >
            <ul>
              <li class="index">
                <a href="javascript:void(0)">首页</a>
              </li>
              <li class="qc">
                <a href="javascript:void(0)">闪购</a>
              </li>
              <li class="qc">
                <a href="javascript:void(0)">生鲜</a>
              </li>
              <li class="qc">
                <a href="javascript:void(0)">团购</a>
              </li>
              <li class="qc last">
                <a href="javascript:void(0)">全球购</a>
              </li>
            </ul>
            <div class="nav-extra">
              <i class="mr-icon-user-secret mr-icon-md nav-user"></i
              ><b></b>我的福利
              <i class="mr-icon-angle-right" style="padding-left: 10px"></i>
            </div>
          </div>
        </div>
      </div>
      <div>
        <ol class="mr-breadcrumb mr-breadcrumb-slash">
          <li>
            <a href="javascript:void(0)">首页</a>
          </li>
          <li>
            <a href="javascript:void(0)">分类</a>
          </li>
          <li class="mr-active">内容</li>
        </ol>
        <div class="scoll">
          <section class="slider">
            <div class="flexslider">
              <ul class="slides">
                <li><img src="images/01.jpg" title="pic" /></li>
                <li><img src="images/02.jpg" /></li>
                <li><img src="images/03.jpg" /></li>
              </ul>
            </div>
          </section>
        </div>
        <div class="item-inform">
          <div id="clearcontent" class="clearfixLeft">
            <div class="box">
              <div
                class="enlarge"
                @mouseenter="mouseEnterShow"
                @mouseleave="mouseLeaveHiden"
                @mousemove="mouseMovePic"
              >
                <!-- 小图 -->
                <img :src="shopInfo.img" title="细节展示放大镜特效" />
                <!-- style="display: none; left: 0px; top: 198px;" -->
                <span class="tool"></span>
                <!-- 大图 -->
                <div class="bigbox" style="display: none">
                  <img
                    :src="shopInfo.img"
                    class="bigimg"
                    style="left: 0px; top: -396px"
                  />
                </div>
              </div>
              <ul id="thumblist" class="tb-thumb">
                <li class="selected">
                  <div class="tb-pic tb-s40">
                    <a href="javascript:void(0)"
                      ><img
                        src=""
                    /></a>
                  </div>
                </li>
                <li class="">
                  <div class="tb-pic tb-s40">
                    <a href="javascript:void(0)"
                      ><img
                        src=""
                    /></a>
                  </div>
                </li>
                <li class="">
                  <div class="tb-pic tb-s40">
                    <a href="javascript:void(0)"
                      ><img
                        src=""
                    /></a>
                  </div>
                </li>
              </ul>
            </div>
            <div class="clear"></div>
          </div>
          <div class="clearfixRight">
            <div class="tb-detail-hd">
              <h1>{{shopInfo.name}}</h1>
            </div>
            <div class="tb-detail-list">
              <div class="tb-detail-price">
                <li class="price iteminfo_price">
                  <dt>促销价</dt>
                  <dd><em>¥</em><b class="sys_item_price">{{shopInfo.unitPrice}}</b></dd>
                </li>
                <li class="price iteminfo_mktprice">
                  <dt>原价</dt>
                  <dd><em>¥</em><b class="sys_item_mktprice">{{shopInfo.prevPrice}}</b></dd>
                </li>
                <div class="clear"></div>
              </div>
              <dl class="iteminfo_parameter freight">
                <dt>配送至</dt>
                <div class="iteminfo_freprice">
                  <div class="mr-form-content address">
                    <select data-mr-selected="">
                      <option value="a">浙江省</option>
                      <option value="b">吉林省</option>
                    </select>
                    <select data-mr-selected="">
                      <option value="a">温州市</option>
                      <option value="b">长春市</option>
                    </select>
                    <select data-mr-selected="">
                      <option value="a">瑞安区</option>
                      <option value="b">南关区</option>
                    </select>
                  </div>
                  <div class="pay-logis">
                    快递<b class="sys_item_freprice">10</b>元
                  </div>
                </div>
              </dl>
              <div class="clear"></div>
              <ul class="tm-ind-panel">
                <li class="tm-ind-item tm-ind-sellCount canClick">
                  <div class="tm-indcon">
                    <span class="tm-label">月销量</span
                    ><span class="tm-count">1015</span>
                  </div>
                </li>
                <li class="tm-ind-item tm-ind-sumCount canClick">
                  <div class="tm-indcon">
                    <span class="tm-label">累计销量</span
                    ><span class="tm-count">6015</span>
                  </div>
                </li>
                <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3">
                  <div class="tm-indcon">
                    <span class="tm-label">累计评价</span
                    ><span class="tm-count">640</span>
                  </div>
                </li>
              </ul>
              <div class="clear"></div>
              <dl class="iteminfo_parameter sys_item_specpara">
                <dt class="theme-login">
                  <div class="cart-title">
                    可选规格<span class="mr-icon-angle-right"></span>
                  </div>
                </dt>
                <dd>
                  <div class="theme-popover-mask"></div>
                  <div class="theme-popover">
                    <div class="theme-span"></div>
                    <div class="theme-poptit">
                      <a href="javascript:;" title="关闭" class="close">×</a>
                    </div>
                    <div class="theme-popbod dform">
                      <form
                        name="loginform"
                        action=""
                        method="post"
                        class="theme-signin"
                        @submit.prevent
                      >
                        <div class="theme-signin-left">
                          <div class="theme-options">
                            <div class="cart-title">颜色</div>
                            <ul>
                              <li class="sku-line selected">荣耀金<i></i></li>
                              <li class="sku-line">冰河银<i></i></li>
                              <li class="sku-line">雅典灰<i></i></li>
                            </ul>
                          </div>
                          <div class="theme-options">
                            <div class="cart-title">套装</div>
                            <ul>
                              <li class="sku-line selected">保护套装<i></i></li>
                              <li class="sku-line">原厂电源<i></i></li>
                              <li class="sku-line">存储套装<i></i></li>
                            </ul>
                          </div>
                          <div class="theme-options">
                            <div class="cart-title number">数量</div>
                            <dd>
                              <!-- 商品数量减少 -->
                              <input
                                id="min"
                                type="button"
                                value="-"
                                @click="reduceCount"
                                class="mr-btn mr-btn-default"
                              />
                              <!-- 总共购买数量 -->
                              <input
                                id="text_box"
                                type="text"
                                :value="shopInfo.num"
                                @blur="changCount($event)"
                                @keyup.enter="changCount($event)"
                                style="width: 30px"
                              />
                              <!-- 商品数量增加 -->
                              <input
                                id="add"
                                type="button"
                                value="+"
                                @click="addCount"
                                class="mr-btn mr-btn-default"
                              /><span id="Stock" class="tb-hidden"
                                >库存<span class="stock">{{shopInfo.canSale}}</span>件</span
                              >
                            </dd>
                          </div>
                          <div class="clear"></div>
                          <div class="btn-op">
                            <div class="btn mr-btn mr-btn-warning">确认</div>
                            <div class="btn close mr-btn mr-btn-warning">
                              取消
                            </div>
                          </div>
                        </div>
                        <div class="theme-signin-right">
                          <div class="img-info"><img src="" /></div>
                          <div class="text-info">
                            <span class="J_Price price-now">¥39.00</span
                            ><span id="Stock" class="tb-hidden"
                              >库存<span class="stock">1000</span>件</span
                            >
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                </dd>
              </dl>
              <div class="clear"></div>
              <div class="shopPromotion gold">
                <div class="hot">
                  <dt class="tb-metatit">店铺优惠</dt>
                  <div class="gold-list">
                    <p>购物满2件打8折，满3件7折</p>
                  </div>
                </div>
                <div class="clear"></div>
              </div>
            </div>
            <div class="pay">
              <div class="pay-opt">
                <a href="index.html"
                  ><span class="mr-icon-home mr-icon-fw">首页</span></a
                >
                <a><span class="mr-icon-heart mr-icon-fw">收藏</span></a>
              </div>
              <li>
                <div class="clearfix tb-btn tb-btn-buy theme-login">
                  <a id="LikBuy" title="点此按钮到下一步确认购买信息"
                    >立即购买</a
                  >
                </div>
              </li>
              <li>
                <div class="clearfix tb-btn tb-btn-basket theme-login" @click="addToCart">
                  <a id="LikBasket" title="加入购物车"><i></i>加入购物车</a>
                </div>
              </li>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div>
        <div class="match">
          <div class="match-title">优惠套装</div>
          <div class="match-comment">
            <ul class="like_list">
              <li>
                <div class="s_picBox">
                  <a href="javascript:void(0)" class="s_pic"
                    ><img
                      src=""
                  /></a>
                </div>
                <a target="_blank" href="javascript:void(0)" class="txt"
                  >防爆玻璃钢化膜</a
                >
                <div class="info-box">
                  <span class="info-box-price">¥ 29.90</span>
                  <span class="info-original-price">￥ 199.00</span>
                </div>
              </li>
              <li class="plus_icon"><i>+</i></li>
              <li>
                <div class="s_picBox">
                  <a href="javascript:void(0)" class="s_pic"
                    ><img
                      src=""
                  /></a>
                </div>
                <a target="_blank" href="javascript:void(0)" class="txt">
                  usb快速充电线</a
                >
                <div class="info-box">
                  <span class="info-box-price">¥ 8.90</span>
                  <span class="info-original-price">￥ 299.00</span>
                </div>
              </li>
              <li class="plus_icon"><i>=</i></li>
              <li class="total_price">
                <p class="combo_price">
                  <span class="c-title">套餐价:</span><span>￥35.00</span>
                </p>
                <p class="save_all">共省:<span>￥463.00</span></p>
                <a href="javascript:void(0)" class="buy_now">立即购买</a>
              </li>
              <li class="plus_icon"><i class="mr-icon-angle-right"></i></li>
            </ul>
          </div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="introduce clearfix">
        <div class="browse">
          <div class="mc">
            <ul>
              <div class="mt">
                <h2>看了又看</h2>
              </div>
              <li class="first">
                <div class="p-img">
                  <a href="javascript:void(0)"
                    ><img src="images/shopcartImg.jpg"
                  /></a>
                </div>
                <div class="p-name">
                  <a href="javascript:void(0)">
                    华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
                  </a>
                </div>
                <div class="p-price"><strong>￥399.00</strong></div>
              </li>
              <li class="first">
                <div class="p-img">
                  <a href="javascript:void(0)"
                    ><img src="images/shopcartImg.jpg"
                  /></a>
                </div>
                <div class="p-name">
                  <a href="javascript:void(0)">
                    华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
                  </a>
                </div>
                <div class="p-price"><strong>￥399.00</strong></div>
              </li>
              <li class="first">
                <div class="p-img">
                  <a href="javascript:void(0)"
                    ><img src="images/shopcartImg.jpg"
                  /></a>
                </div>
                <div class="p-name">
                  <a href="javascript:void(0)">
                    华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待
                  </a>
                </div>
                <div class="p-price"><strong>￥399.00</strong></div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 三栏列表 -->
        <div class="introduceMain">
          <div data-mr-tabs="" class="mr-tabs">
            <ul class="mr-avg-sm-3 mr-tabs-nav mr-nav mr-nav-tabs">
              <li id="infoTitle" :class="{ 'mr-active': currentIndex === 0 }">
                <a
                  ><span class="index-needs-dt-txt" @click="currentIndex = 0"
                    >宝贝详情</span
                  ></a
                >
              </li>
              <li
                id="commentTitle"
                :class="{ 'mr-active': currentIndex === 1 }"
              >
                <a
                  ><span class="index-needs-dt-txt" @click="currentIndex = 1"
                    >全部评价</span
                  ></a
                >
              </li>
              <li
                id="youLikeTitle"
                :class="{ 'mr-active': currentIndex === 2 }"
              >
                <a
                  ><span class="index-needs-dt-txt" @click="currentIndex = 2"
                    >猜你喜欢</span
                  ></a
                >
              </li>
            </ul>

            <!-- 宝贝详情 -->
            <div class="mr-tabs-bd" v-show="currentIndex === 0">
              <div id="info" class="mr-tab-panel">
                <div class="J_Brand">
                  <div class="attr-list-hd tm-clear">
                    <h4>产品参数：</h4>
                  </div>
                  <div class="clear"></div>
                  <ul id="J_AttrUL">
                    <li title="">商品名称: 华为荣耀畅玩4X</li>
                    <li title="">商品编号: 1684485</li>
                    <li title="">商品毛重: 157.00g</li>
                    <li title="">商品产地: 中国大陆</li>
                    <li title="">系统: 安卓（Android）</li>
                    <li title="">运行内存: 3GB</li>
                    <li title="">像素: 1600万以上</li>
                    <li title="">电池容量： 3000mAh-3999mAh</li>
                    <li title="">机身颜色： 金色</li>
                  </ul>
                  <div class="clear"></div>
                </div>
                <div class="details">
                  <div class="attr-list-hd after-market-hd">
                    <h4>商品细节</h4>
                  </div>
                  <div class="twlistNews">
                    <img src="images/tw1.jpg" />
                    <img src="images/tw2.jpg" />
                    <img src="images/tw3.jpg" />
                    <img src="images/tw4.jpg" />
                    <img src="images/tw5.jpg" />
                  </div>
                </div>
                <div class="clear"></div>
              </div>
            </div>

            <!-- 全部评价 -->
            <div class="mr-tabs-bd" v-show="currentIndex === 1">
              <div id="comment" class="mr-tab-panel">
                <div class="actor-new">
                  <div class="rate">
                    <strong>100<span>%</span></strong
                    ><br />
                    <span>好评度</span>
                  </div>
                  <dl>
                    <dt>买家印象</dt>
                    <dd class="p-bfc">
                      <q class="comm-tags"
                        ><span>性价比高</span><em>(2177)</em></q
                      ><q class="comm-tags"
                        ><span>系统流畅</span><em>(1860)</em></q
                      ><q class="comm-tags"
                        ><span>外观漂亮(</span><em>(1823)</em></q
                      ><q class="comm-tags"
                        ><span>功能齐全</span><em>(1689)</em></q
                      ><q class="comm-tags"
                        ><span>支持国产机</span><em>(1488)</em></q
                      ><q class="comm-tags"
                        ><span>反应快</span><em>(1392)</em></q
                      ><q class="comm-tags"
                        ><span>照相不错</span><em>(1119)</em></q
                      ><q class="comm-tags"
                        ><span>通话质量好</span><em>(865)</em></q
                      ><q class="comm-tags"
                        ><span>国民手机</span><em>(831)</em></q
                      >
                    </dd>
                  </dl>
                </div>
                <div class="clear"></div>
                <div class="tb-r-filter-bar">
                  <ul class="tb-taglist mr-avg-sm-4">
                    <li class="tb-taglist-li tb-taglist-li-current">
                      <div class="comment-info">
                        <span>全部评价</span
                        ><span class="tb-tbcr-num">(32)</span>
                      </div>
                    </li>
                    <li class="tb-taglist-li tb-taglist-li-1">
                      <div class="comment-info">
                        <span>好评</span><span class="tb-tbcr-num">(32)</span>
                      </div>
                    </li>
                    <li class="tb-taglist-li tb-taglist-li-0">
                      <div class="comment-info">
                        <span>中评</span><span class="tb-tbcr-num">(32)</span>
                      </div>
                    </li>
                    <li class="tb-taglist-li tb-taglist-li--1">
                      <div class="comment-info">
                        <span>差评</span><span class="tb-tbcr-num">(32)</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="clear"></div>
                <ul class="mr-comments-list mr-comments-list-flip">
                  <li class="mr-comment" style="display: block">
                    <a href="javascript:void(0)"
                      ><img
                        src=""
                        class="mr-comment-avatar"
                    /></a>
                    <div class="mr-comment-main">
                      <header class="mr-comment-hd">
                        <div class="mr-comment-meta">
                          <a href="#link-to-user" class="mr-comment-author"
                            >b***1 (匿名)</a
                          >
                          评论于 <time datetime="">2015年11月02日 17:46</time>
                        </div>
                      </header>
                      <div class="mr-comment-bd">
                        <div data-id="255776406962" class="tb-rev-item">
                          <div class="J_TbcRate_ReviewContent tb-tbcr-content">
                            帮朋友买的，没拆开来看，据说还不错，很满意！
                          </div>
                          <div class="tb-r-act-bar">颜色分类：金 电信4G</div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="mr-comment" style="display: block">
                    <a href="javascript:void(0)"
                      ><img
                        src=""
                        class="mr-comment-avatar"
                    /></a>
                    <div class="mr-comment-main">
                      <header class="mr-comment-hd">
                        <div class="mr-comment-meta">
                          <a href="#link-to-user" class="mr-comment-author"
                            >b***1 (匿名)</a
                          >
                          评论于 <time datetime="">2015年11月02日 17:46</time>
                        </div>
                      </header>
                      <div class="mr-comment-bd">
                        <div data-id="255776406962" class="tb-rev-item">
                          <div class="J_TbcRate_ReviewContent tb-tbcr-content">
                            帮朋友买的，没拆开来看，据说还不错，很满意！
                          </div>
                          <div class="tb-r-act-bar">颜色分类：金 电信4G</div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="mr-comment" style="display: block">
                    <a href="javascript:void(0)"
                      ><img
                        src=""
                        class="mr-comment-avatar"
                    /></a>
                    <div class="mr-comment-main">
                      <header class="mr-comment-hd">
                        <div class="mr-comment-meta">
                          <a href="#link-to-user" class="mr-comment-author"
                            >b***1 (匿名)</a
                          >
                          评论于 <time datetime="">2015年11月02日 17:46</time>
                        </div>
                      </header>
                      <div class="mr-comment-bd">
                        <div data-id="255776406962" class="tb-rev-item">
                          <div class="J_TbcRate_ReviewContent tb-tbcr-content">
                            帮朋友买的，没拆开来看，据说还不错，很满意！
                          </div>
                          <div class="tb-r-act-bar">颜色分类：金 电信4G</div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="mr-comment" style="display: none">
                    <a href="javascript:void(0)"
                      ><img
                        src=""
                        class="mr-comment-avatar"
                    /></a>
                    <div class="mr-comment-main">
                      <header class="mr-comment-hd">
                        <div class="mr-comment-meta">
                          <a href="#link-to-user" class="mr-comment-author"
                            >b***1 (匿名)</a
                          >
                          评论于 <time datetime="">2015年11月02日 17:46</time>
                        </div>
                      </header>
                      <div class="mr-comment-bd">
                        <div data-id="255776406962" class="tb-rev-item">
                          <div class="J_TbcRate_ReviewContent tb-tbcr-content">
                            帮朋友买的，没拆开来看，据说还不错，很满意！
                          </div>
                          <div class="tb-r-act-bar">颜色分类：金 电信4G</div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="mr-comment" style="display: none">
                    <a href="javascript:void(0)"
                      ><img
                        src=""
                        class="mr-comment-avatar"
                    /></a>
                    <div class="mr-comment-main">
                      <header class="mr-comment-hd">
                        <div class="mr-comment-meta">
                          <a href="#link-to-user" class="mr-comment-author"
                            >b***1 (匿名)</a
                          >
                          评论于 <time datetime="">2015年11月02日 17:46</time>
                        </div>
                      </header>
                      <div class="mr-comment-bd">
                        <div data-id="255776406962" class="tb-rev-item">
                          <div class="J_TbcRate_ReviewContent tb-tbcr-content">
                            帮朋友买的，没拆开来看，据说还不错，很满意！
                          </div>
                          <div class="tb-r-act-bar">颜色分类：金 电信4G</div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="clear"></div>
                <ul class="mr-pagination mr-pagination-right">
                  <li class="mr-disabled">
                    <a href="javascript:void(0)">«</a>
                  </li>
                  <li class="mr-active">
                    <a href="javascript:void(0)">1</a>
                  </li>
                  <li class="">
                    <a href="javascript:void(0)">2</a>
                  </li>
                  <li class="">
                    <a href="javascript:void(0)">»</a>
                  </li>
                </ul>
                <div class="clear"></div>
                <div class="tb-reviewsft">
                  <div class="tb-rate-alert type-attention">
                    购买前请查看该商品的
                    <a href="javascript:void(0)">购物保障</a
                    >，明确您的售后保障权益。
                  </div>
                </div>
              </div>
            </div>

            <!-- 猜你喜欢 -->
            <div class="mr-tabs-bd" v-show="currentIndex === 2">
              <div id="youLike" class="mr-tab-panel">
                <div class="like">
                  <ul class="mr-avg-sm-2 mr-avg-md-3 mr-avg-lg-4 boxes">
                    <li style="display: block">
                      <div class="i-pic limit">
                        <img src="images/shopcartImg.jpg" />
                        <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
                        <p class="price fl"><b>¥</b><strong>498.00</strong></p>
                      </div>
                    </li>
                    <li style="display: block">
                      <div class="i-pic limit">
                        <img src="images/shopcartImg.jpg" />
                        <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
                        <p class="price fl"><b>¥</b><strong>498.00</strong></p>
                      </div>
                    </li>
                    <li style="display: block">
                      <div class="i-pic limit">
                        <img src="images/shopcartImg.jpg" />
                        <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
                        <p class="price fl"><b>¥</b><strong>498.00</strong></p>
                      </div>
                    </li>
                    <li style="display: block">
                      <div class="i-pic limit">
                        <img src="images/shopcartImg.jpg" />
                        <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
                        <p class="price fl"><b>¥</b><strong>498.00</strong></p>
                      </div>
                    </li>
                    <li style="display: none">
                      <div class="i-pic limit">
                        <img src="images/shopcartImg.jpg" />
                        <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
                        <p class="price fl"><b>¥</b><strong>498.00</strong></p>
                      </div>
                    </li>
                    <li style="display: none">
                      <div class="i-pic limit">
                        <img src="images/shopcartImg.jpg" />
                        <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
                        <p class="price fl"><b>¥</b><strong>498.00</strong></p>
                      </div>
                    </li>
                    <li style="display: none">
                      <div class="i-pic limit">
                        <img src="images/shopcartImg.jpg" />
                        <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
                        <p class="price fl"><b>¥</b><strong>498.00</strong></p>
                      </div>
                    </li>
                    <li style="display: none">
                      <div class="i-pic limit">
                        <img src="images/shopcartImg.jpg" />
                        <p>华为 荣耀 畅玩4X 白色 移动4G手机 双卡双待</p>
                        <p class="price fl"><b>¥</b><strong>498.00</strong></p>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="clear"></div>
                <ul class="mr-pagination mr-pagination-right">
                  <li class="mr-disabled">
                    <a href="javascript:void(0)">«</a>
                  </li>
                  <li class="mr-active">
                    <a href="javascript:void(0)">1</a>
                  </li>
                  <li class="">
                    <a href="javascript:void(0)">2</a>
                  </li>
                  <li class="">
                    <a href="javascript:void(0)">»</a>
                  </li>
                </ul>
                <div class="clear"></div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <!-- 底部 -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import throttle from "lodash/throttle"; //引入节流函数
import { mapActions } from 'vuex';
export default {
  name: "ShopInfo",
  data() {
    return {
      currentIndex: 0, //当前显示的商品栏目
      shopInfo:{
        name:"",
        unitPrice:"",
        prevPrice:"",
        canSale:"",//库存
        img:"",
        num:"",//购买数量
      },//当前商品的信息
    };
  },
  mounted(){
    //初始化商品信息
    this.initShopInfo();
  },
  methods: {
    ...mapActions(["toCart"]),
    //添加到购物车
    addToCart(){
        // 添加到购物车
        // 判断是否有token
        let token = localStorage.getItem("51SHOPTOKEN");
        if(token){
          this.toCart(this.shopInfo);
          alert("添加到购物车成功");
          //跳转到添加购物车成功界面
          this.$router.push({name:"AddCartSuccess",query:{
                  img:this.shopInfo.img,
                  num:this.shopInfo.num,
                  name:this.shopInfo.name,
          }});
        }else{
          alert("还没有登录,请先登录")
          //跳转到登录
          this.$router.push("/login");
        }

    },  
    // 初始化商品信息
    initShopInfo(){
        let info = {
            name:"华为 荣耀 畅玩4X 白色 移动4G手机",
            unitPrice:"499.00",
            prevPrice:"599.00",
            canSale:1000,//库存
            img:require("/public/images/01.jpg"),
            num:1,//购买数量
        };
        this.shopInfo = info;
    },
    //失去焦点和按下回车的时候触发
    changCount(event){
        let newValue = event.target.value;
        newValue = parseInt(newValue);
        if(newValue){
            //为合法的值则修改数据
            this.shopInfo.num = newValue;
        }else{
            event.target.value = this.shopInfo.num;
        }
    },
    //减少数量
    reduceCount(){
        this.shopInfo.num--;
        if(this.shopInfo.num<=0){
            this.shopInfo.num = 1;
        }
    },
    //增加数量
    addCount(){
        this.shopInfo.num++;
    },
    //鼠标移出,隐藏遮罩层和大图
    mouseLeaveHiden() {
      document.querySelector(".tool").style.cssText =
        "display:none;left:0;top:0";
      document.querySelector(".bigbox").style.display = "none";
    },
    // 鼠标进入,显示遮罩层和大图
    mouseEnterShow() {
      document.querySelector(".tool").style.display = "block";
      document.querySelector(".bigbox").style.display = "block";
    },
    //鼠标移动图片,放大镜
    mouseMovePic: throttle((event) => {
      let enlarge = document.querySelector(".enlarge");
      let tool = document.querySelector(".tool");
      let bigimg = document.querySelector(".bigimg");
      event = window.event || event; //兼容设置
      //获取图片放大工具到商品图片左端距离
      let x =
        event.clientX -
        enlarge.offsetLeft -
        tool.offsetWidth / 2 +
        document.documentElement.scrollLeft;
      //获取图片放大工具到商品图片顶端距离
      let y =
        event.clientY -
        enlarge.offsetTop -
        tool.offsetHeight / 2 +
        document.documentElement.scrollTop;
      if (x < 0) {
        //到达边缘
        x = 0;
      }
      if (y < 0) {
        y = 0; //到达边缘
      }
      if (x > enlarge.offsetWidth - tool.offsetWidth) {
        x = enlarge.offsetWidth - tool.offsetWidth; //图片放大工具到商品图片左端最大距离
      }
      if (y > enlarge.offsetHeight - tool.offsetHeight) {
        y = enlarge.offsetHeight - tool.offsetHeight; //图片放大工具到商品图片顶端最大距离
      }
      //设置图片放大工具定位
      tool.style.left = x + "px";
      tool.style.top = y + "px";
      //设置放大图片定位
      bigimg.style.left = -x * 2 + "px";
      bigimg.style.top = -y * 2 + "px";
    }, 1000 / 60),
  },
};
</script>

<style scoped>
@import "./css/optstyle.css";
@import "./css/infoStyle.css";
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.introduce {
  padding-bottom: 0;
}
.enlarge {
  border: 1px solid #cdcdcd;
  position: relative;
  width: 400px;
  height: 400px;
}

.tool {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: goldenrod;
  opacity: 0.6;
  cursor: move;
}

.bigbox {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 410px;
  z-index: 1;
  display: none;
}

.bigbox img {
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
